<template>
	<view class="pay-box">
		<uni-popup type="bottom" @change="changePop" ref="payPop">
			<scroll-view scroll-y="true"
				style="height: 400rpx;background-color: #FFFFFF;border-radius: 30rpx 30rpx 0 0;">
				<view class="list" hover-class="active" v-for="(item,index) in payOptions" @click="toPay(item)">
					{{item.name}}
				</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				payOptions: [{
						name: '微信支付',
						code: 1
					}, {
						name: '余额支付',
						code: 4
					},
					// #ifdef APP-PLUS
					{
						name: '支付宝支付',
						code: 2
					},
					// #endif
				],
			}
		},
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			show: function() {
				if (this.show == true) {
					this.$refs['payPop'].open()
				} else if (this.show == false) {
					this.$refs['payPop'].close()
				}
			}
		},
		methods: {
			toPay(item) {
				this.$emit("toPay", item)
			},
			changePop(e) {
				this.$emit('isShow', e.show)
			}
		}
	}
</script>
<style scoped lang="scss">
	.list {
		padding: 30rpx 0;
		text-align: center;
		background-color: #FFFFFF;
		border-radius: 30rpx;
	}

	.active {
		background-color: rgb(245, 245, 245);
	}
</style>
